<template>
	<view class="user">
		<view class="top">
			<view class="infor">
				<view class="img1"><img mode="aspectFill" :src="userInfo.avatar">
				</view>
				<view class="text">
					<view style="font-size:20px;font-weight:600;">{{userInfo.nickName}}</view>
					<view style="font-size:14px;font-weight:520;">
						萍乡学院&nbsp;&nbsp;&nbsp;{{userInfo.sex==1?"女":"男"}}</view>
					<view style="font-size:14px;font-weight:520;">学号：{{userInfo.studentId}}</view>
				</view>
				<view class="bottom">
					<view class="setting" @click="goEditProfile">
						编辑资料
					</view>
					<!-- <view class="setting" @click="goViewReviews">评价</view> -->
					<!-- 					<view style="display:flex;margin-top:2px;">
						<view style="margin-top:-2px;"><img src="../../static/关注.png" style="width:25px;height:25px;">
						</view>
						关注
					</view>
					<view style="display:flex;margin-top:3px;margin-left:-15px;">
						<view style="margin-top:-2px;"><img src="../../static/私信.png" style="width:25px;height:25px;">
						</view>
						私信
					</view> -->
				</view>
			</view>
			<view class="set">

				<button class="setting" :class="{ active: currentTab === 'dynamic' }"
					@click="changeState('dynamic')">活动</button>
				<button class="setting" :class="{ active: currentTab === 'activity' }"
					@click="changeState('activity')">动态</button>
				<!-- <button class="setting" :class="{ active: currentTab === 'following' }"
					@click="currentTab = 'following'">我的关注</button>
				<button class="setting" :class="{ active: currentTab === 'followers' }"
					@click="currentTab = 'followers'">关注我的</button> -->

			</view>
		</view>

		<view calss="main">
			<view class="first" style="margin:5px auto ;" v-if="currentTab === 'dynamic'" v-for="item in posts">
				<view class="title">{{item.type}}
					<text style="margin-left: 10%; font-size: 14px; color: seagreen;">{{item.me?"":"已参与"}}</text>
				</view>
				<view class="mains">
					<view style="margin-bottom: 2px;display:flex;">
						<view style="margin-top:-2px;"> <img src="../../static/时间.png" style="width:20px;height:20px;">
						</view>{{item.time}}
					</view>
					<view style="display:flex;">
						<view style="margin-left:-2px;"><img src="../../static/位置.png" style="width:23px;height:23px;">
						</view>
						{{item.place}}
					</view>
					<view style="margin-top: -3px;display:flex;">
						<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>{{item.sex}}
					</view>
				</view>
				<view class="img">
					<img :src="item.img" class="img2">
				</view>
				<view class="bottom1">

					<button class="button" @click="goDetail(item)">{{item.joinNumber===item.number?"已满员":"组队"}}</button>
					<view>{{item.joinNumber}}/{{item.number}}</view>
				</view>

			</view>

			<view class="post" style="margin:5px auto ;" v-if="currentTab === 'activity'"
				v-for="(post, index) in recommendedPosts" :key="post.id">

				<view class="post-header">
					<image class="avatar" :src="post.avatar"></image>
					<view class="username">{{ post.nickName }}</view>
				</view>
				<view class="post-content">
					<view class="post-images">
						<image :src="post.communityPost.imgUrl" class="post-image" mode="widthFix"></image>
					</view>
					<view v-html="post.communityPost.content"></view>
				</view>
				<view class="post-footer">
					<view class="action-buttons">
						<view class="like-button" @click="handleLike(recommendedPosts[index])">
							<img src="../../static/like-icon.png" alt="Like" class="icon" />
							<text>{{ post.communityPost.goods }}</text>
						</view>
						<view class="comment-button" @click="handleComment(recommendedPosts[index])">
							<img src="../../static/comment-icon.png" alt="Comment" class="icon" />
							<text>{{ post.communityPost.commentNumber }}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import {
		editProfile,
		getProfile
	} from "@/api/user.js";
	import {
		uploadAvatar
	} from "@/api/system/user.js"
	import {
		userPlayRelationList
	} from "@/api/play.js"
	import config from '@/config'
	import {
		communityList,
		likeCommunity
	} from "@/api/community.js";
	export default {
		data() {
			return {
				posts: [{
					id: 1,
					username: '用户0936TK12',
					avatar: '/static/communityP1.jpg',
					content: `挥洒汗水诠释快乐，阳光体育源于热爱，体力无限源于活力，向积极出发，收获健康与喜悦！`,
					likes: 3,
					comments: 3,
					images: ['/static/communityR4.jpg']
				}],
				userInfo: {
					avatar: '',
					nickName: '',
					sex: 0,
					studentId: '',
				},
				currentTab: "dynamic", // 默认显示动态
				recommendedPosts: []
			};
		},
		onShow() {
			this.getProfileInfo()
			this.getActivityPlay()
			this.getCommunityList()
		},
		methods: {
			changeState(state) {
				this.currentTab = state;
				if (state === 'activity') {
					this.getCommunityList();
				} else {
					this.getActivityPlay()
				}
			},
			getCommunityList() {
				const data = {
					selectMe: true
				}
				communityList(data).then(res => {
					console.log(res)
					this.recommendedPosts = res.rows;
					this.recommendedPosts.forEach(item => {
						item.communityPost.imgUrl = config.baseUrl + item.communityPost.img
						item.avatar = config.baseUrl + item.avatar
					})
				})
			},
			getActivityPlay() {
				userPlayRelationList().then(res => {
					this.posts = res.rows;
				})
			},
			getProfileInfo() {
				getProfile().then(res => {
					this.userInfo.nickName = res.data.nickName;
					this.userInfo.sex = res.data.sex;
					this.userInfo.avatar = config.baseUrl + res.data.avatar
					this.userInfo.studentId = res.data.studentId
				})
			},
			goDetail(item) {
				// 使用 uni.$emit 发送数据，uni.$emit 是全局事件通信机制
				uni.$emit('detailData', item);
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}&time=${encodeURIComponent(item.time)}&place=${encodeURIComponent(item.place)}&sex=${encodeURIComponent(item.sex)}&more=${encodeURIComponent(item.more)}&number=${encodeURIComponent(item.number)}`
				});
			},
			goEditProfile() {
				uni.navigateTo({
					url: "/pages/editProfile/editProfile"
				})
			},
			goViewReviews() {
				uni.navigateTo({
					url: "/pages/reviews/reviews"
				})
			},
			handleLike(postId) {
				console.log(post)
				uni.showModal({
					title: '确认点赞',
					content: '你确定要点赞该帖子吗？',
					success: (res) => {
						if (res.confirm) {
							// this.toggleLike(postId);
							likeCommunity(post.communityPost.id).then(res => {
								// 2为点赞成功
								if (res.data === 2) {
									this.toggleLike(post.communityPost.id, true)
								} else if (res.data === 1) {
									this.toggleLike(post.communityPost.id, false)
								}
							})
						}
					}
				});
			},
			handleComment(postId) {
				uni.showModal({
					title: '确认评论',
					content: '你确定要评论该帖子吗？',
					success: (res) => {
						if (res.confirm) {
							this.goToComments(postId);
						}
					}
				});
			},
			goToLikes(postId) {
				uni.navigateTo({
					url: `/pages/Likes/Likes?postId=${postId}`,
					success: () => {
						this.selectedPostId = null;
						this.showOptions = false;
						console.log('成功跳转至点赞页面，帖子ID:', postId);
					},
					fail: (err) => {
						console.error('跳转至点赞页面失败:', err);
						uni.showToast({
							title: '跳转失败，请检查页面配置',
							icon: 'none'
						});
					}
				});
			},
			goToComments(postId) {
				uni.navigateTo({
					url: `/pages/Comments/Comments?postId=${postId}`,
					success: () => {
						this.selectedPostId = null;
						this.showOptions = false;
					},
					fail: (err) => {
						console.error('跳转至评论页面失败:', err);
					}
				});
			},

			toggleLike(postId, like) {
				const post = this.recommendedPosts.find(p => p.communityPost.id === postId);
				if (post) {
					post.communityPost.goods = post.communityPost.goods + (like ? 1 : -1);
					// post.isLiked = !post.isLiked;
					// console.log('更新后的点赞状态:', post.likes, post.isLiked);
					// this.likeCount = this.posts.reduce((acc, p) => acc + (p.isLiked ? 1 : 0), 0);
					// console.log('总点赞数:', this.likeCount);
				} else {
					console.error('未找到对应的帖子，ID:', postId);
					// 可以在这里添加用户提示，告知未找到帖子
					uni.showToast({
						title: '未找到帖子',
						icon: 'none'
					});
				}
			},
			addComment(postId, comment) {
				const MAX_COMMENT_LENGTH = 200; // 新增：评论最大长度
				if (comment.length > MAX_COMMENT_LENGTH) {
					alert(`评论长度不能超过 ${MAX_COMMENT_LENGTH} 个字符！`);
					return;
				}
				const post = this.posts.find(p => p.id === postId);
				if (post && comment.trim() !== '') {
					post.comments.push(comment);
					post.commentsCount++;
					this.newComment = ''; // 清空输入框
				} else {
					alert('评论内容不能为空！');
				}
			}
		},

	}
</script>

<style lang="scss">
	.user {
		position: relative;
	}

	.top {
		width: 390px;
		height: 270px;
		background-image: linear-gradient(105deg, #fff, #d0e6ff, #6cc0ff, #55aaff);
		padding: 35px 10px;

		.infor {
			width: 370px;
			height: 170px;
			background-color: #fff;
			border-radius: 15px;
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06); // 添加外阴影	
			background-color: #fff;

			// 内嵌阴影效果（可选）
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
				pointer-events: none;
			}


			.text {
				width: 200px;
				height: 100px;
				// background-color: #aaff7f;
				position: absolute;
				top: 40px;
				left: 170px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

			}

			.bottom {
				width: 370px;
				height: 50px;
				// background-color: #ff557f;
				position: absolute;
				top: 150px;
				left: 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.setting {
					width: 80px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					border: #d0e6ff solid 1.5px;
					border-radius: 25px;
				}
			}
		}

		.set {
			width: 370px;
			height: 70px;
			// background-color: #fff;
			margin-top: 15px;
			border-top: #9c9c9c solid 1.5px;
			display: flex;
			justify-content: center;
			align-items: center;

			.setting {
				width: 160px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				padding: 0 10px;
				margin: -5px 3px;
				margin-top: -5px;
				background-color: #fff;
				border: #d0e6ff solid 1.5px;
				border-radius: 25px;
				font-size: 14px;
			}
		}
	}

	.img1 {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		background-color: #ffaa7f;
		position: absolute;
		top: 10px;
		left: 40px;
		overflow: hidden;
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
	}

	.main {
		width: 390px;
		height: 421px;
		background-color: #aaaaff;
		margin-left: 20px;
	}

	.title {
		font-weight: 600;
		font-size: 20px;
		margin-left: 10px;
	}

	.mains {
		width: 320px;
		height: 70px;
		// background-color: #fff;
		margin: 5px 20px;
		font-size: 14px;
		border-bottom: #797979 solid 1.5px;

	}

	.first {
		width: 360px;
		height: 145px;
		margin-left: -9px;
		margin-top: 20px;
		border-radius: 10px; // 圆角边框
		padding: 10px;
		background-color: #fff; // 背景颜色
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06); // 添加外阴影
		position: relative;
		overflow: hidden;

		// 渐变背景（可选）
		background: linear-gradient(145deg, #ffffff, #f0f0f0);

		// 内嵌阴影效果（可选）
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
			pointer-events: none;
		}
	}

	.img2 {
		width: 100px;
		height: 100px;
		border-radius: 15px;
		background-color: #ffaaff;
		/* 背景颜色 */
		position: absolute;
		right: 30px;
		top: 5px;
		overflow: hidden;
		/* 防止图片超出盒子范围 */
	}

	.bottom1 {
		display: flex;
		flex-direction: row-reverse;

		.button {
			font-size: 16px;
			width: 60px;
			height: 30px;
			background-color: #85c6ff;
			line-height: 30px;
			text-align: center;
			border-radius: 10px;
			margin: -3px 10px;
		}
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;
		border: 1rpx solid #f0f0f0;
	}

	.user-name {
		font-size: 39rpx;
		color: #333;
		flex: 1;
	}

	.user-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}

	.followers-container {
		padding: 32rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.post-header {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中对齐 */
		margin-bottom: 10px;
		/* 下边距 */
	}

	.avatar {
		width: 40px;
		/* 头像宽度 */
		height: 40px;
		/* 头像高度 */
		border-radius: 50%;
		/* 圆形头像 */
		margin-right: 10px;
		/* 右边距 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 小阴影效果 */
	}

	.username {
		font-weight: bold;
		/* 加粗字体 */
		font-size: 14px;
		/* 字体大小 */
		color: #333;
		/* 文字颜色 */
	}

	/* 帖子图片 */
	.post-images .post-image {
		width: 110px;
		/* 图片宽度占满容器 */
		max-width: 200px;
		/* 最大宽度限制 */
		height: auto;
		/* 根据比例自动调整高度 */
		margin-bottom: 10px;
		/* 下边距 */
		border-radius: 8px;
		/* 圆角效果 */
		object-fit: cover;
		/* 图片裁剪方式 */
	}

	/* 帖子底部 */
	.post-footer {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 左右对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 10px;
		/* 内边距 */
		border-top: 1px solid #ddd;
		/* 上边框 */
		background-color: #f9f9f9;
		/* 轻微的背景色 */
		border-radius: 0 0 12px 12px;
		/* 圆角效果 */
	}

	/* 动作按钮 */
	.action-buttons {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 左右对齐 */
		width: 100%;
		/* 占满父级宽度 */
	}

	.like-button,
	.comment-button {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		width: 50%;
		/* 占用一半宽度 */
		padding: 8px;
		/* 内边距 */
		border-radius: 8px;
		/* 圆角效果 */
		transition: background-color 0.3s ease;
		/* 平滑过渡背景色 */
	}

	.like-button:hover,
	.comment-button:hover {
		background-color: #e6f7ff;
		/* 鼠标悬停时背景色 */
	}

	.icon {
		width: 24px;
		/* 图标宽度 */
		height: 24px;
		/* 图标高度 */
		margin-right: 5px;
		/* 右边距 */
		color: #F0F8FF;
		/* 图标颜色 */
		transition: color 0.3s ease;
		/* 平滑过渡图标颜色 */
	}

	.like-button:hover .icon,
	.comment-button:hover .icon {
		color: #007aff;
		/* 鼠标悬停时图标颜色 */
	}

	.post {
		margin-bottom: 20px;
		/* 下边距 */
		padding: 15px;
		/* 内边距 */
		background-color: #F0FFFF;
		/* 白色背景 */
		border-radius: 14px;
		/* 圆角效果 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		/* 平滑缩放和阴影变化效果 */
	}
</style>